<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    target: null,
    agvID: null,
    type: null
  }),
  type: 0,
  agvSelect: [],
  stationSelect: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const type = ref(props.type);
const agvSelect = ref(props.agvSelect);
const stationSelect = ref(props.stationSelect);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="80px">
    <el-row :gutter="30">
      <re-col :value="type === 0 ? 12 : 24" :xs="24" :sm="24">
        <el-form-item label="车辆" prop="agvID" label-width="50px">
          <el-select v-model="newFormInline.agvID" filterable clearable placeholder="请选择车辆" style="width:100%">
            <el-option v-for="item in agvSelect" :key="item.AgvId" :label="item.AgvName" :value="item.AgvId">
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" v-if="type === 0">
        <el-form-item label="目标站点" prop="target">
          <el-select v-model="newFormInline.target" filterable clearable placeholder="请选择目标站点" style="width:100%">
            <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
              :value="item.stationid">
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
  margin-right: 16px;
}
</style>
